<template>
  <div class="CommonConfirmModel" v-if="isShow">
    <div class="overlay">
      <view class="wrapper">
        <div class="block">
          <div class="title">{{ data.title }}</div>
          <div class="content" v-if="data.content" v-html="data.content"></div>
          <div class="content">
            <slot/>
          </div>
          <div class="btn-wrap">
            <div
              class="btn cancel"
              @click="isShow = false"
              hover-class="hover"
              hover-start-time="0"
              hover-stay-time="0">
              取消
            </div>
            <div
              class="btn ok"
              @click="handelOk"
              hover-class="hover"
              hover-start-time="0"
              hover-stay-time="0">
              确定
            </div>
          </div>
        </div>
      </view>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: false,
      data: {
        title: '',
        content: '',
        ok () { },
      },
    }
  },
  methods: {
    $show (data) {
      this.data = data
      this.isShow = true
    },
    handelOk () {
      this.isShow = false
      this.data.ok && this.data.ok()
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";

.CommonConfirmModel {
	.overlay {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 999;
		background: rgba(0, 0, 0, .2);

		.wrapper {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;

			.block {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				max-width: 95vw;
				min-height: 122px;
				padding: 23px 34px;
				border-radius: 4px;
				text-align: center;
				background: #f9f9f9;
				transform: translateY(-25px);

				.title {
					line-height: 20px;
					font-weight: 400;
					font-size: 14px;
					color: rgba(0, 0, 0, .8);
					letter-spacing: 1px;
				}

				.content {
					line-height: 30px;
					font-weight: 500;
					font-size: $fz-l;
					color: rgba(102, 102, 102, 1);
				}

				.btn-wrap {
					display: flex;
					justify-content: space-between;
					width: 146px;

					.btn {
						width: 60px;
						border: 1px solid rgba(0, 0, 0, .34);
						border-radius: 4px;
						line-height: 25px;
						text-align: center;
						font-weight: 400;
						font-size: 12px;
						color: rgba(0, 0, 0, .6);
						letter-spacing: 1px;

						&.ok {
							border: 1px solid #e51e1e;
							color: #fff;
							background: #e51e1e;
						}

						&:hover {
							opacity: .8;
						}
					}
				}
			}
		}
	}
}
</style>
